<template>
	<view class="app">
		<pageHeader ref="pageHeader"></pageHeader>
		<!-- 轮播图 -->
		<view class="" v-if="data.courseImg">
			<image class="icon-image" :src="'https://maxh-1305457127.cos.ap-guangzhou.myqcloud.com/'+data.courseImg" ></image>
		</view>
		<view class="introduce column">
			<text class="title">{{ data.courseName }}</text>
			<view class="price-wrap row">
				<mix-price-view :price="data.price" :size="40"></mix-price-view>
			</view>
			<view class="bot row">
				<text class="fill">讲师: {{ data.username}}</text>
				<text class="fill">学历:{{ data.degree}}</text>
				<text class="fill">课程类型: {{ data.courseType}}</text>
			</view>
		</view>
		<!--  分享 -->
		<view class="share-wrap row">
			<view class="icon row">
				<text class="mix-icon icon-iconfontxingxing"></text>
				<text>分享</text>
			</view>
			<text class="tit">发给好友看看吧~</text>
			<text class="mix-icon icon-bangzhu1"></text>
			
			<!-- #ifdef MP-WEIXIN -->
			<button type="primary" open-type="share">
				<view class="btn">
					立即分享
					<text class="mix-icon icon-you"></text>
				</view>
			</button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="btn" @click="doAppShare">
				立即分享
				<text class="mix-icon icon-you"></text>
			</view>
			<!-- #endif -->
		</view>
		<view class="c-list">
			<view class="row b-b">
				<text class="tit">报名截止时间</text>
				<text class="con red">{{dateTime(data.stopTime)}}</text>
			</view>
			<view class="row b-b">
				<text class="tit">授课地点</text>
				<view class="con" v-if="data.courseRoom">
					<text class="service">{{data.courseRoom || ''}}</text>
				</view>
			</view>
			<view class="row b-b">
				<text class="tit">课程日期</text>
				<view class="con" v-if="data.courseDate">
					<text class="service">{{data.courseDate.replace(/,/g, " 至 ")||''}}</text>
				</view>
			</view>
			<view class="row b-b">
				<text class="tit">课程时间</text>
				<view class="con" v-if="data.courseTime">
					<text class="service">{{data.courseTime.replace(/,/g, " 至 ")||''}}</text>
				</view>
			</view>
			<view class="row b-b">
				<text class="tit">课程周期</text>
				<view class="con" v-if="data.courseWeek">
					<text class="service">{{data.courseWeek.replace(/,/g, " 至 ")||''}}</text>
				</view>
			</view>
		</view>
		<view class="detail-desc">
			<view class="d-header center">
				<text>课程详情</text>
			</view>
			<jyf-parser
				ref="article"
				:html="data.courseDesc" 
				lazy-load 
				show-with-animation 
			></jyf-parser>
			<!-- <rich-text :nodes="data.courseDesc"></rich-text> -->
		</view>
		<!-- 底部操作菜单 -->
		<bottom-operation :infoData="data" @onOprationClick="onOprationClick"></bottom-operation>
		<!-- 规格面板 -->
		<sku v-if="data.id" ref="skuPopup" :infoData="data" @setSku="setCurrentSku" @addToCart="addToCart" @buyNow="buyNow"></sku>
		<!-- loading -->
		<mix-loading v-if="isLoading" :mask="true"></mix-loading>
	</view>
</template>

<script>
	import jyfParser from '@/components/jyf-parser/jyf-parser.vue'
	import pageHeader from './components/detail-page-header'//页面头
	import bottomOperation from './components/bottom-operation'//底部栏
	import sku from './components/sku'//sku面板
	import dayjs from 'dayjs';
	import{getCourseDetail,CheckAddInformation} from '@/common/js/api.js'
	let _anchorList = [];
	export default{
		components: {
			jyfParser,
			pageHeader,
			bottomOperation,
			sku
		},
		data() {
			return {
				currentSku: {},
				userInfo:{},
				isLoading:true,
				isCheckAddInfo:false,
				data: {
					id:'',
					isCheckAddInfo:false,
					courseName:'',
					courseImg:'',
					price:'',
					username:'',
					degree:'',
					courseType:'',
					stopTime:'',
					courseRoom:'',
					courseDate:'',
					courseTime:'',
					courseWeek:'',
					courseDesc:''
				},
				ratingData: {}, //评价
			};
		},
		computed: {
			curUserInfo(){
				return this.$store.state.userInfo
			}
		},
		watch: {
			curUserInfo(curUserInfo){
				const {id} = curUserInfo;
				this.userInfo = this.curUserInfo;
				console.log("watch",curUserInfo);
			},	
		},
		onLoad(options){
			this.userInfo = this.curUserInfo;
			this.id = options.id;
			console.log("onload");
			
			// const param = JSON.parse(options.param);
			// console.log(param.item);
			// this.data= param.item;
			// this.loadRating(); //加载评价
		},
		onShow() {
			console.log("onshow");
			if(this.userInfo.id !==undefined && this.userInfo.id !==null){
				console.log("onshow",this.userInfo);
				const informationObj = {courseId:this.id}
				this.isCheckAdd(informationObj);			
			}else{
				this.loadData();
			}
				

		},
		onPageScroll(e) {
			this.$refs.pageHeader && this.$refs.pageHeader.pageScroll(e);
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(res) {
			return {
				title: this.data.title,
				path: '/pages/product/detail?id='+this.data.id,
				imageUrl: this.data.courseImg,
				teacherId:this.data.teacherId
			}
		},
		// #endif
		methods:{
			async isCheckAdd(informationObj){
				const res = await CheckAddInformation(informationObj)
				console.log(res);
				if(res.code===200 && res.data>0){
					this.isCheckAddInfo = true
				}else{
					this.isCheckAddInfo = false
				}
				this.loadData();
			},	
			async loadData(){
				const res = await getCourseDetail(this.id)
				console.log(res);
				if(res.data) this.data=res.data[0]
				this.data.isCheckAddInfo = this.isCheckAddInfo
				this.isLoading=false;
				console.log("loaddate",this.data.isCheckAddInfo);
				// //添加浏览历史
				this.addProductHistory();
			},
			dateTime(time){
				return dayjs(time).format('YYYY年MM月DD日 HH:mm:ss')
			},

			//立即购买
			buyNow(){
				// this.hidePopup('skuPopup');
			},
			//设置当前选择sku
			setCurrentSku(data){
				this.currentSku = data;
			},
			//添加浏览历史
			addProductHistory(){
				const data = this.data;
				let list = uni.getStorageSync('productHistory');
				if(!list){
					list = [];
				}
				const index = list.findIndex(item=> item.id === data.id);
				if(index !== -1){
					list.splice(index, 1);
				}
				list.unshift({
					id: data.id,
					thumb: data.courseImg
				})
				uni.setStorageSync('productHistory', list);
			},
			//删除当前浏览历史
			delHistory(){
				let list = uni.getStorageSync('productHistory');
				if(!list){
					return;
				}
				const index = list.findIndex(item=> item.id === data.id);
				if(index === -1){
					return;
				}
				list.splice(index, 1);
				uni.setStorageSync('productHistory', list);
			},
			showPopup(key, type){
				this.$refs[key].open(type);
			},
			onOprationClick(type){
				this.showPopup('skuPopup', type);
			},
			doAppShare(){
				this.$util.throttle(async ()=>{
					const data = {
					    provider: "weixin",
					    scene: 'WXSceneSession',
					    type: 5,
						imageUrl: this.data.courseImg,
						title: this.data.title,
						// miniProgram: {
						// 	id: 'gh_3dada2e0f833',
						// 	path: '/pages/product/detail?id='+this.data.id,
						// 	type: 0,
						// 	webUrl: 'http://1.15.46.70'
						// },
					    success: res=> {
					        console.log("success:" + JSON.stringify(res));
					    },
					    fail: err=> {
					        console.log("fail:" + JSON.stringify(err));
					    }
					}
					uni.share(data);
				})
			},
		},
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
	}
</style>
<style scoped lang='scss'>
	.app{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); 
		
		&:after{
			content: '';
			display: block;
			width: 100%;
			height: 100rpx;
		}
	}
	/* 标题简介 */
	.introduce{
		background: #fff;
		padding: 20rpx 30rpx;
		
		.title{
			min-height: 44rpx;
			font-size: 32rpx;
			color: #333;
			line-height: 44rpx;
			font-weight: 700;
		}
		.price-wrap{
			min-height: 40rpx;
			margin-top: 28rpx;
			font-size: 26rpx;
		}
		.m-price{
			margin-left: 10rpx;
			margin-right: 16rpx;
			color: #999;
			text-decoration: line-through;
		}
		.tag{
			transform: translateY(4rpx);
			padding: 0 10rpx;
			margin-left: 8rpx;
			background: $base-color;
			font-size: 20rpx;
			color: #fff;
			line-height: 32rpx;
			border-radius: 4rpx;
			position: relative;
			bottom: 8rpx;
		}
		.bot{
			padding: 28rpx 0 10rpx 4rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	/* 分享 */
	.share-wrap{
		background: linear-gradient(to right, #fdf5f6, #fbebf6);
		height: 76rpx;
		padding: 0 30rpx;
		color: $base-color;
		
		.icon{
			width: 90rpx;
			height: 30rpx;
			border: 1px solid $base-color;
			border-radius: 4rpx;
			position: relative;
			overflow: hidden;
			font-size: 22rpx;
			
			&:after{
				position:absolute;
				left: -20rpx;
				top: -12rpx;
				content: '';
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background-color: $base-color;
			}
		}
		.icon-iconfontxingxing{
			position:relative;
			z-index: 1;
			font-size: 24rpx;
			margin-left: 2rpx;
			margin-right: 10rpx;
			color: #fff;
		}
		.tit{
			flex: 1;
			font-size: 26rpx;
			color: #666;
			margin-left:14rpx;
		}
		.icon-bangzhu1{
			padding: 10rpx;
			font-size: 30rpx;
			display: none;
		}
		.btn{
			padding-left: 20rpx;
			font-size: 24rpx;
			color: $base-color;
		}
		.icon-you{
			font-size: 22rpx;
			margin-left: 4rpx;
			color: $base-color;
		}
	}
	.c-list{
		font-size: 26rpx;
		color: #888;
		background: #fff;
		
		.row{
			min-height: 82rpx;
			padding: 16rpx 30rpx;
			position:relative;
			
			&:after{
				border-color: #eaeaea;
			}
			&:last-child:after{
				border: 0;
			}
		}
		.tit{
			width: 160rpx;
		}
		.con{
			flex: 1;
			color: #333;
			
			.attr{
				margin-right: 10rpx;
			}
			.service{
				margin-right: 30rpx;
				
				&:last-child{
					margin: 0;
				}
			}
		}
		.con-list{
			color: #333;
			
			text{
				line-height: 40rpx;
			}
		}
		.red{
			color: $base-color;
		}
		.icon-you{
			font-size: 24rpx;
			color: #999;
		}
	}
	/* 评价 */
	.rating-wrap{
		padding: 20rpx 30rpx 0rpx;
		background: #fff;
		margin-top: 12rpx;
		
		&.no-data{
			padding: 10rpx 30rpx 10rpx;
		}
		.e-header{
			display: flex;
			align-items: center;
			height: 70rpx;
			font-size: 28rpx;
			color: #333;
		}
		.tit{
			font-size: 32rpx;
			color: #333;
			font-weight: 700;
			margin-right: 4rpx;
		}
		.tip{
			flex: 1;
			font-size: 26rpx;
			color: #999;
			text-align: right;
		}
		.icon-you{
			margin-left: 8rpx;
			font-size: 24rpx;
			color: #999;
		}
		.mix-rating-item::after{
			border: 0;
		}
	}
	/*  详情 */
	.detail-desc{
		margin-top: 12rpx;
		background: #fff;
		margin: 0 20rpx;
		padding: 0 20rpx;
		.d-header{
			height: 80rpx;
			font-size: 30rpx;
			color: #333;
			
			text{
				margin: 0 20rpx;
			}
			&:before, &:after{
				content: '';
				width: 60rpx;
				border-bottom: 1px solid #ccc; 
			}
		}
	}
	.icon-image{
		width: 100%;
	}
</style>
